<template>
  <!-- 发布分享弹框 -->
  <el-dialog :visible.sync="visible" class="wish_dialog"
  @close="cancel" title="分享" :close-on-click-modal="false"
  :close-on-press-escape="false" :append-to-body="true">
    <div class="shuru">
       <el-input  id="emojiInput" 
        v-model="content"
        type="textarea"
        :rows="10"
        placeholder="分享今日趣事"
        ></el-input>
        <div class="wishDialog_smile" @click="smile">
            <svg class="icon-smile">
                <use xlink:href="#icon-smile"></use>
            </svg>
            <span>表情</span>
        </div>
        <picker :include="['people','Smileys']" v-show="showemoji" :showSearch="false" :showPreview="false" :showCategories="false" @select="addEmoji" /> 
    </div>
    <div class="wish_btn">
        <el-button type="primary" plain @click="release">发布</el-button>
        <el-button type="warning" plain @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Picker } from "emoji-mart-vue"; //引入组件
export default {
    components:{
        Picker
    },
    data(){
        return{
            visible:false,
            content:"",
            showemoji:false,//是否显示emoji表情框
        }
    },
    mounted(){},
    methods:{
        init(){//进入弹框
            this.visible = true
        },
        addEmoji(e) {
            var elInput = document.getElementById('emojiInput'); //根据id选择器选中对象
            var startPos = elInput.selectionStart;// input 第0个字符到选中的字符
            var endPos = elInput.selectionEnd;// 选中的字符到最后的字符
            if (startPos === undefined || endPos === undefined) return
            var txt = elInput.value;
            // 将表情添加到选中的光标位置
            var result = txt.substring(0, startPos) + e.native + txt.substring(endPos)
            elInput.value = result;// 赋值给input的value
            // 重新定义光标位置
            elInput.focus();
            elInput.selectionStart = startPos + e.native.length;
            elInput.selectionEnd = startPos + e.native.length;
            this.content  = result// 赋值给表单中的的字段
        },
        smile(){//点击显示或关闭emoji表情框
            if(this.showemoji==false){
                this.showemoji = true
            }else{
                this.showemoji = false
            }
        },
        cancel(){//点击取消按钮
            this.visible = false
            this.showemoji = false
            this.content = ""
        },
        release(){//点击发布按钮
            this.axios({
                headers: { Authentication: localStorage.getItem("token") },
                method: "post",
                url: "/comment/saveComment",
                data:{
                    content:this.content
                }
            }).then((res)=>{
                if (res.data.code != 20001) {
                    return this.$message.error(res.data.msg);
                }
                this.$alert('发布成功，等待管理员审核',{
                    confirmButtonText:'确定',
                    callback:action=>{
                        this.visible = false
                        this.showemoji = false
                        this.content = ""
                    }
                })
            })
        }
    }
}
</script>

<style lang="scss">
    .wish_dialog{
        .el-dialog{
            height: 78vh;
            top: -3vh;
            overflow: hidden;
            padding: 2px;
        }
        .shuru{
            height: 58vh;
            overflow: auto;
            // border: 1px solid #000;
        }
        // height: 78vh;
        .emoji-mart[data-v-7bc71df8] {
            font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            height: 300px;
            color: #ffffff !important;
            border: 1px solid #d9d9d9;
            border-radius: 5px;
            background: #fff;
        }
        .wishDialog_smile{
            cursor: pointer;
            width: 10%;
            // border: 1px solid #000;
            .icon-smile{
                width: 2em;
                height: 2em;
                margin: 2px;
                fill: currentColor;
                vertical-align: middle;
                overflow: hidden;
                cursor: pointer;
            }
        }
        .wishDialog_smile:hover{
            color: sandybrown;
        }
        .wish_btn{
            width: 100%;
            // border: 1px solid #000;
            position: absolute;
            bottom: 0;
            left: 0;
            margin-top: auto;
            padding-bottom: 2vh;
            text-align: center;
            background: #fff;
        }
    }
</style>